<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			firstName: <input type="text" v-model="firstname">
			lastName: <input type="text" v-model='lastname'>
			<button @click="btnHandle">全名</button>
			fullName:{{fullName}} <br>
			name:{{name}}
			<hr>
			java: <input type="text" v-model.number.lazy="javaScore"><br>
			前端 : <input type="text" v-model.number.lazy="webScore"> <br>
			总分(函数): <input type="text" v-model="sumFun()"><br>
			总分(计算属性) : <input type="text" v-model="sum"><br>
			总分(计算属性的双向): <input type="text" v-model="sum2">
		</div>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					firstname: '',
					lastname: '',
					fullName: '',
					javaScore: '',
					webScore: ''

				},
				methods: {
					btnHandle() {
						console.log("methdos#btnHandle...");
						this.fullName = this.firstname + '.' + this.lastname;
					},
					sumFun() {
						console.log("methdos#sumFun...");
						return this.javaScore + this.webScore;
					}
				},
				computed: {
					name: function() {
						console.log("computed# name.....");
						return this.firstname + '.' + this.lastname;
					},
					sum: {
						get: function() {
							console.log('computed# sum');
							return this.javaScore + this.webScore;
						}
					},
					sum2:{
						get:function() {
							console.log('computed# sum');
							return this.javaScore + this.webScore;
						},
						set:function(newValue){ //newValue表示更新后的数据
						   let avg=newValue/2;
						   [this.javaScore,this.webScore]=[avg,avg];
						   
							
						}
					}
				}
			});
		</script>
	</body>
</html>
